<!DOCTYPE html>
<html>
  <head>
    <title>获取video封面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src='./js/extendvideo.js'></script><!--会向video绑定一个getPoster方法-->
    <script type="text/javascript">
      onload=function(){
        //var poster=poster();
        v=document.getElementById('v');
        var p=document.getElementById('poster1');
        file=document.getElementById('file');
        file.onchange=function(e){
          console.log(file.files);
          if(file.files.length>0){
            var URL=window.URL||window.webkitURL;
            var b=URL.createObjectURL(file.files[0]);
            v.src=b;
          }
          //window.URL.revokeObjectURL(b);//释放一个URL对象
        }
        document.getElementById('jie').onclick=function(){
           data=v.getPoster();//可以不传参数
           //var data=v.getPoster(640,320);
           console.log(data);
           p.src=window.URL.createObjectURL(data);
        }
      }
    </script>
  </head>
<body>
  <input type="file" name="name" value="" id="file"><br>
  <video id="v" class="video-js vjs-default-skin"  preload="auto"  controls poster="./poster.png"  >
    <source src="./movie.webm" type="video/webm">
    <source src="./movie.ogg" type="video/ogg">
    <p class="vjs-no-js">你的浏览器不支持video,请升级浏览器尝试。</a></p>
  </video>
  <!-- <video id="v2" class="video-js vjs-default-skin" controls preload="auto" width="640" poster="./poster.png" height="264" >
    <source src="./movie.webm" type="video/webm">
    <source src="./movie.ogg" type="video/ogg">
    <p class="vjs-no-js">你的浏览器不支持video,请升级浏览器尝试。</a></p>
  </video> -->
  <button id='jie'>截图</button>
  <img src="" id="poster1">

</body>
</html>
